<template>
  <div class="mapwrap" :style="bgimage">
      <h1>地图中心</h1>
      <div class="items_wrap">
       <ul v-for="(each,i) of mapList" :key="i" class="items" @click="jumptoMap(each)">
           <img :src="each.imgurl" alt="">
           <li style="color:#ddd">{{each.title}}</li>
       </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            bgimage:{
                backgroundImage: 'url(' + require('../assets/login/csgo_bg.jpg') + ')'
            },
            mapList:[
                {
                    title:'服役生涯',
                    imgurl:require('../assets/map/a.jpg'),
                    _subtite:'fuyishengya'
                },
                 {
                    title:'后备生涯',
                    imgurl:require('../assets/map/b.jpg'),
                    _subtite:'houbeishengya'
                },
                 {
                    title:'爆破模式',
                    imgurl:require('../assets/map/c.jpg'),
                    _subtite:'baopomoshi'
                },
                 {
                    title:'军备竞赛',
                    imgurl:require('../assets/map/d.jpg'),
                    _subtite:'junbeijinsai'
                },
                 {
                    title:'人质解救',
                    imgurl:require('../assets/map/e.jpg'),
                    _subtite:'renzhijiejiu',
                },
                 {
                    title:'炽热沙城',
                    imgurl:require('../assets/map/f.jpg'),
                    _subtite:'chireshacheng'
                },
                
            ]
        }
    },
    methods:{
        jumptoMap(data){
            // console.log(data)
            this.$router.push({
                name:'mapdetails',
                params:{
                    mapname:data
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../assets/map/map.scss';
</style>>
